import { Component } from 'react';
import Taro, { getCurrentInstance } from '@tarojs/taro';
import { View, Image } from '@tarojs/components'
import { staticUrl } from '@/utils'
const P1 = staticUrl('/img/maintain/activity_2/v1/1.png')
const P2 = staticUrl('/img/maintain/activity_2/v1/2.png')
const P3 = staticUrl('/img/maintain/activity_2/v1/3.png')
const P4 = staticUrl('/img/maintain/activity_2/v1/4.png')
const P5 = staticUrl('/img/maintain/activity_2/v1/5.png')
const P6 = staticUrl('/img/maintain/activity_2/v1/6.png')
const cover = staticUrl('/img/maintain/activity_2/cover.png')

import './index.scss'
interface State {
  distributionLeaderId: number | string
}

export default class Index extends Component {
  $instance = getCurrentInstance();

  constructor (props) {
    super(props)
    this.state = {
      distributionLeaderId: ''
    }
  }

  state: State


  UNSAFE_componentWillMount() { }
  componentDidMount() {
    // 获取团长id
    const { distributionLeaderId='' } = this.$instance.router.params
    console.log('this.$router.params', this.$instance.router.params)
    this.setState({
      distributionLeaderId
    })
  }
  UNSAFE_componentWillReceiveProps(nextProps, nextContext) { }
  componentWillUnmount() { }
  componentDidShow() {
    // 获取团长id
    const { distributionLeaderId = '' } = this.$instance.router.params
    this.setState({
      distributionLeaderId
    })
  }

  onShareAppMessage() {
    const { distributionLeaderId = '' } = this.state
    return {
      title: `到集群车宝，买车险送全年不限次数保养`,
      path: `pages/maintain/activity_2/index?distributionLeaderId=${distributionLeaderId}&distributionLeaderUserId=${distributionLeaderId}`,
      imageUrl: cover
    }
  }

  // 跳转
  goLink(val) {
    const { distributionLeaderId = '' } = this.state
    let query = {
      distributionLeaderId: distributionLeaderId,
      distributionLeaderUserId: distributionLeaderId,
      type: 'oil_puls'
    }
    let path = '/insurance/upKeep/transact/puls'
    if (val == 'oil') {
      Taro.navigateTo({ url: `/pages/webview/index/index?path=${path}&query=${JSON.stringify(query)}` })
    } else if (val == 'tyre') {
      query.type = 'tyre_puls'
      Taro.navigateTo({ url: `/pages/webview/index/index?path=${path}&query=${JSON.stringify(query)}` })
    } else if (val == 'head') {
      Taro.navigateTo({
        url: `/pages/distribution/index/index?distributionLeaderId=${distributionLeaderId}`
      })
    } else if (val == 'info') {
      path = '/insurance/index'
      Taro.navigateTo({ url: `/pages/webview/index/index?path=${path}&query=${JSON.stringify(query)}` })
    }
  }

  render() {
    return (
      <View className="body" >
        <Image className='img' mode='widthFix' src={P1}></Image>
        <Image  className='img' mode='widthFix' src={P2}></Image>
        <Image className='img'onClick={() => this.goLink('oil')}  mode='widthFix' src={P3}></Image>
        <Image  className='img' mode='widthFix' src={P4}></Image>
        <Image className='img' onClick={() => this.goLink('tyre')} mode='widthFix' src={P5}></Image>
        <View className="box">
          <View className="info" onClick={() => this.goLink('info')}></View>
          <View className="head" onClick={() => this.goLink('head')}></View>
          <Image className='img' mode='widthFix' src={P6}></Image>
        </View>
      </View>
    )
  }
}
